<template>
  <el-card class="device-status">
    <template #header>
      <div class="panel-header">
        <el-icon><Monitor /></el-icon>
        <span>设备状态监控</span>
      </div>
    </template>

    <!-- 设备状态概览 -->
    <div class="status-overview">
      <div class="status-item" v-for="(item, index) in deviceStatus" :key="index">
        <el-icon :class="['status-icon', item.status]"><component :is="item.icon" /></el-icon>
        <div class="status-info">
          <div class="name">{{item.name}}</div>
          <div class="status">{{item.statusText}}</div>
        </div>
      </div>
    </div>

    <!-- 运行时长统计 -->
    <div class="runtime-chart" ref="runtimeChartRef"></div>

    <!-- 故障诊断信息 -->
    <div class="diagnosis-list">
      <div class="diagnosis-header">
        <el-icon><Warning /></el-icon>
        <span>故障诊断信息</span>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in diagnosisList"
          :key="index"
          :type="item.type"
          :timestamp="item.time"
        >
          {{item.content}}
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { Monitor, Warning, Connection, Cpu, TrendCharts } from '@element-plus/icons-vue'

const deviceStatus = ref([
  { name: '温度传感器', icon: 'TrendCharts', status: 'online', statusText: '正常运行' },
  { name: '湿度传感器', icon: 'Connection', status: 'online', statusText: '正常运行' },
  { name: 'CO2传感器', icon: 'Cpu', status: 'warning', statusText: '需要校准' },
  { name: 'PH值传感器', icon: 'Monitor', status: 'offline', statusText: '离线' }
])

const diagnosisList = ref([
  { 
    content: 'CO2传感器需要校准',
    time: '2024-01-09 10:30',
    type: 'warning'
  },
  {
    content: 'PH值传感器通信中断',
    time: '2024-01-09 09:15',
    type: 'danger'
  },
  {
    content: '系统例行维护完成',
    time: '2024-01-08 15:00',
    type: 'success'
  }
])

const runtimeChartRef = ref<HTMLElement>()

onMounted(() => {
  if (runtimeChartRef.value) {
    const chart = echarts.init(runtimeChartRef.value)
    chart.setOption({
      title: {
        text: '设备运行时长统计',
        textStyle: {
          color: '#7fdbff',
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: 40,
        left: 40,
        right: 20,
        bottom: 20
      },
      xAxis: {
        type: 'category',
        data: ['温度', '湿度', 'CO2', 'PH值'],
        axisLine: {
          lineStyle: {
            color: '#7fdbff'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '小时',
        axisLine: {
          lineStyle: {
            color: '#7fdbff'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(127,219,255,0.1)'
          }
        }
      },
      series: [
        {
          type: 'bar',
          data: [168, 168, 165, 120],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00e4ff' },
              { offset: 1, color: '#1890ff' }
            ])
          }
        }
      ]
    })
  }
})
</script>

<style scoped lang="scss">
.device-status {
  background: rgba(0,21,41,0.6);
  border: 1px solid rgba(0,255,255,0.1);

  :deep(.el-card__header) {
    border-bottom: 1px solid rgba(0,255,255,0.1);
    padding: 12px 16px;
  }

  .panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7fdbff;
  }

  .status-overview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;

    .status-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: rgba(0,21,41,0.4);
      border-radius: 8px;
      border: 1px solid rgba(0,255,255,0.1);

      .status-icon {
        font-size: 24px;
        
        &.online {
          color: #52c41a;
        }
        
        &.warning {
          color: #faad14;
        }
        
        &.offline {
          color: #ff4d4f;
        }
      }

      .status-info {
        .name {
          color: #7fdbff;
          margin-bottom: 4px;
        }

        .status {
          font-size: 12px;
          color: #00e4ff;
        }
      }
    }
  }

  .runtime-chart {
    height: 200px;
    margin: 16px 0;
  }

  .diagnosis-list {
    padding: 16px;
    border-top: 1px solid rgba(0,255,255,0.1);

    .diagnosis-header {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #7fdbff;
      margin-bottom: 16px;
    }

    :deep(.el-timeline) {
      .el-timeline-item__node--success {
        background-color: #52c41a;
      }
      
      .el-timeline-item__node--warning {
        background-color: #faad14;
      }
      
      .el-timeline-item__node--danger {
        background-color: #ff4d4f;
      }

      .el-timeline-item__content {
        color: #7fdbff;
      }

      .el-timeline-item__timestamp {
        color: rgba(127,219,255,0.6);
      }
    }
  }
}
</style> 